<template>
  <div>
    <el-page-header @back="back()" content="种类管理页面" style="margin-bottom: 10px;"/>
    <el-button type="primary" @click="add">新增</el-button>
    <el-button type="primary" @click="del">删除</el-button>
  <el-table
    :data="kinds.slice((currentPage-1)*pagesize,currentPage*pagesize)"
    style="width: 60vw;left: 10vw;height: 60vh"
    max-height="55vh"
    height="55vh"
    @selection-change="handleSelectionChange">
    <el-table-column
      label="序号"
      width="50">
      <template slot-scope="scope">
          <span>
            {{scope.$index+1+(currentPage-1)*5}}
          </span>
      </template>
    </el-table-column>
    <el-table-column
      label="种类 ID"
      prop="id">
    </el-table-column>
    <el-table-column
      label="种类名称"
      prop="kind">
    </el-table-column>
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
  </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 40]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="kinds.length">
    </el-pagination>
    <add-kind ref="addKinds" :callBack="loadKinds"></add-kind>
  </div>
</template>

<script>
    import AddKind from "../goods_manager/AddKind";
    import {getKinds} from "./models/kind";

    export default {
        name: "KindsManage",
      components: {AddKind},
      data() {
        return {
          currentPage:1, //初始页
          pagesize:5,    //    每页的数据
          kinds:[],
        }
      },
      mounted:function () {
        this.$parent.show=false
        this.handleKinds();
      },
      beforeRouteLeave(to,from,next){
        next(vm=>{
          vm.$parent.show=true
        })
      },
      methods:{
          back(){
            this.$router.back();
          },
          add(){
            this.$refs.addKinds.dialogFormVisible=true
            this.loadKinds()
          },
        loadKinds(){
          console.log('loadKinds')
          getKinds().then(resp=>{
            console.log(JSON.stringify(resp))
            this.kinds=resp;
          })
        },
        del(){
          var _this=this
          this.$axios.post('/kinds/delete', this.selected_kinds()).then(resp => {
            if (resp && resp.status === 200) {
              this.loadKinds()
              this.$message({
                message:'删除成功',
                type:'success'
              })
            }
          }).catch(res=>{
              this.$message({
                message:'删除失败',
                type:'success'})
          })
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
          //alert(JSON.stringify(this.multipleSelection))
        },
        selected_kinds(){
          /*
        var kinds= {}
        for(var i=0;i<this.multipleSelection.length;i++){
          kinds['good'+i.toString()]=this.multipleSelection[i]
        }*/
          var kinds= []
          for(var i=0;i<this.multipleSelection.length;i++){
            kinds.push(this.multipleSelection[i].id)
          }
          return kinds
        },
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
          this.pagesize = size;
          console.log(this.pagesize)  //每页下拉显示数据
        },
        handleCurrentChange: function(currentPage){
          this.currentPage = currentPage;
          console.log(this.currentPage)  //点击第几页
        },
        handleKinds() {
          this.loadKinds();
        }
      },
    }
</script>

<style scoped>

</style>
